<template>
  <div :key="update" class="flex-1 iframe relative px-12">
    <div :class="{ loading }" class="w-100 h-100">
      <iframe
        class="h-100 w-100"
        frameborder="0"
        :style="{ pointerEvents: preventDefault ? 'none' : 'initial' }"
        :src="src"
        @load="load"
      ></iframe>
    </div>
    <div v-show="loading" class="h-100 flex-s flex flex-col">
      <img :src="logo" class="loading-logo" />
      <div>加载中....</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import logo from '@/assets/images/logo.png';
  import { preventDefault } from './bus';

  const loading = ref(true);
  const load = () => {
    loading.value = false;
  };
  const props = defineProps<{
    src: string;
    update: number;
  }>();
</script>

<style lang="scss" scoped>
  .iframe {
    background-color: #eee;
  }
  .loading {
    position: absolute;
  }
  .loading-logo {
    animation: loading-logo 1s infinite;
    @keyframes loading-logo {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
</style>
